<template>
    <!--顶部标题导航栏-->
    <div class="top_header">
        <div class="sys_logo"><img class="sys_logo_img" src="~@/assets/logo.png"></div>
        <div class="sys_name">某某GIS系统</div>
        <div class="btn_leftDrawer_ctl" @click="leftDrawerToggle()"><img class="btn_ctl_img" src="~@/assets/item.png"/></div>
        <div class="top_nav_menu">

          <el-menu 
            :default-active="activeIndex" 
            class="el-menu-demo" 
            mode="horizontal" 
            @select="handleSelect"
            background-color="#f9ac2c"
            text-color="#ffffff"
            active-text-color="rgb(224 255 75)"
          >
                <el-menu-item index="1">处理中心</el-menu-item>
                <el-submenu index="2">
                    <template slot="title">我的工作台</template>
                    <el-menu-item index="2-1">选项1</el-menu-item>
                    <el-menu-item index="2-2">选项2</el-menu-item>
                    <el-menu-item index="2-3">选项3</el-menu-item>
                    <el-submenu index="2-4">
                    <template slot="title">选项4</template>
                    <el-menu-item index="2-4-1">选项1</el-menu-item>
                    <el-menu-item index="2-4-2">选项2</el-menu-item>
                    <el-menu-item index="2-4-3">选项3</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-menu-item index="3" disabled>消息中心</el-menu-item>
                <el-menu-item index="4"><a href="" target="_blank">订单管理</a></el-menu-item>
          </el-menu>
                     

            <template>                
            </template>
        </div>

        <!--（内嵌）左侧-伸缩式-抽屉导航菜单-->
        <div class="user_info" @click="$router.push('/')"><img class="btn_ctl_img" src="~@/assets/images/profile2.png"/>
        </div>
                
    </div>
</template>

<script>
export default {
    name:'TopNav',
    components: {            
    },
    data () {
        return {
            activeIndex: '1',
            isDrawerVisible: false, //左侧导航栏抽屉默认不显示
        }
    },
    methods: {
        //控制顶部导航菜单的方法
        handleSelect(){

        },
        handleClose(done) {
            this.isDrawerVisible = false;
        },
        //显示或隐藏左侧伸缩式抽屉导航菜单
        leftDrawerToggle(){
            this.isDrawerVisible = !this.isDrawerVisible;
        }
    }
}
</script>

<style scoped>
.top_header {
    /*background-color: #FFFFFF;*/
    background-color: #f9ac2c;
    width: 100%;
    height: 60px;
    border-bottom: 3px solid orange;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.sys_logo {
    /*background-color: yellow;*/
    width: 80px;
    height: 60px;
    margin-left: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.sys_logo_img {
    width:50px;
    height:50px;
}
.sys_name {
    /*background-color: chocolate;*/
    width:300px;
    height: 55px;
    color:white;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    font-size: 22px;
}
.btn_leftDrawer_ctl {
    /*background-color: aliceblue;*/
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.btn_ctl_img {
    width:30px;
    height:30px;
}
.top_nav_menu {
    /*background-color: deepskyblue;*/
    width: calc(100% - 80px - 60px - 300px - 140px - 40px);
    height: 55px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.mapgis-ui-menu-horizontal {
    border-bottom: unset;
}
.user_info {
    /*background-color: chartreuse;*/
    width: 150px;
    height: 55px;
    float:right !important;
    margin-right: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
}
</style>